<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>imageLazyLoading(图片延迟加载)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<style>
.ColorPalette{height:35px;
line-height:35px;
text-align:center;}
.GridShow .Row{margin-bottom:10px;}
.GridShow [class^=Col]{line-height:20px;padding:5px;margin-bottom:5px}
</style>
</head>
<body >
<div>
   <div class="HelpBox" id="WrapperArea">
   
	<h2>$$.imagesLazyLoad()</h2>
		<h3>概述</h3>
		<div class="desc">
		<p>用户滚动到图片位置时加载图片。</p>
		<p>它使页面加载速度更快，提高滚动性能，也节省流量。</p>
		<p>在页面元素加载完毕后，添加初始化方法：$$.imagesLazyLoad()。</p>
		
		</div>
	<div class="example">
		<h4>图片结构</h4>
		<pre><code>&lt;img data-src="../../../images/01.jpg" class="Lazy LazyFadeIn"/></code></pre>
		<ul class="List">
			<li>指定图像的 data-src 属性而不是 src 属性</li>
			<li>将“ Lazy ”类添加到图像</li>
			<li>LazyFadeIn - 图片加载时的淡入过渡动画，可选。</li>
		</ul>
		<h4>图片作为背景结构</h4>
		<pre><code>&lt;div data-background="../images/02.jpg" class="Lazy LazyFadeIn">&lt;/div></code></pre>
		<ul class="List">
			<li>指定元素的 data-background 属性</li>
			<li>将“ Lazy ”类添加到元素上</li>
			<li>LazyFadeIn - 图片加载时的淡入过渡动画，可选。</li>
		</ul>
		<h4>手动触发加载</h4>
		<pre><code>$$('img.lazy').trigger('lazy'); 
$$('div.lazy').trigger('lazy');</code></pre>

		
	</div>

</div>
</div>
</body>
</html>
